<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo08-axios示例加强</title>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.css">
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../bootstrap-4.6.2-dist/js/bootstrap.js"></script>
    <!-- 这个示例中，因为要用到bootstrap/axios/vue，所以先将这几个功能所需的js和css先引入进来 -->


</head>
<body class="container-fluid" style="margin-top: 30px">
<div id="app">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="margin-bottom: 20px">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://img.zcool.cn/community/017618554460300000019ae90ab7e8.jpg@2o.jpg" class="d-block w-100"
                     alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://img.zcool.cn/community/011e2d59263a7db5b3086ed4ea0736.jpg@2o.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://img0.baidu.com/it/u=1287682239,464897643&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=500"
                     class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </button>
    </div>
    <div class="row">
        <div class="col-md-2" v-for="item in starList">
            <div class="card" style="width: 20rem;">
                <img :src="item.url"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{item.name}}</h5>
                    <p class="card-text" style="height: 200px">{{item.desc}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            starList: [],//因为前端展示的是多条数据，所以后台返回的一定是一个数组，就用[]表示这个数据的类型
        },
        methods: {
            //写一个向后台发送请求获取数据的方法
            getInfo() {
                axios.get("/getInfo").then(res => {
                    this.starList = res.data;
                })
            }
        },
        created() {//注意：这个变量它是一个方法，和上面是不一样的。它的作用：当这个界面，就会自动触发
            this.getInfo();//这个方法调用写在这里，就意味着，界面一加载，就会自动调用
        }
    })


</script>
</html>